<template>
  <div>
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="page.roleName" clearable placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button type="primary" @click="onAdd">新建</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="this.pageData.records"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="用户名"
          width="200">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="修改时间">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="updateClick(scope.row)" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="deleteClick(scope.row.id)" circle></el-button>
          </el-tooltip>

        </template>
      </el-table-column>

    </el-table>

    <div style="float: right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="this.pageData.current"
          :page-size="this.pageData.size"
          layout="total, prev, pager, next"
          :total="this.pageData.total">
      </el-pagination>
    </div>


    <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form :inline="true" :model="sysRole" :rules="rules" ref="sysRole"
               class="demo-form-inline">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="sysRole.roleName" placeholder="角色名称"></el-input>
        </el-form-item>
      </el-form>

      <el-tree
          :data="sysMenus"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[]"
          :default-checked-keys="sysRole.checkedKeys"
          :setCheckedKeys="sysRole.checkedKeys"
          @check="currentChecked"
          :props="defaultProps">
      </el-tree>

      <el-button @click="closeDia()">取 消</el-button>
      <el-button type="primary" @click="onSubmit('sysRole')">提交</el-button>
    </el-dialog>

  </div>


</template>

<script>
export default {
  name: "sysRole",
  data() {
    return {
      dialogVisible: false,
      pageData: {},
      page: {
        pageNum: 1,
        pageSize: 10,
        roleName: ''
      },
      sysRole: {
        id: null,
        roleName: '',
        checkedKeys:[]
      },
      form: {
        roleName: ''
      },
      sysMenus: [],
      rules: {
        roleName: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
        ],
      },
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
    }
  },
  methods: {
    currentChecked (nodeObj, SelectedObj) {
      this.sysRole.checkedKeys = SelectedObj.checkedKeys
    },
    getFindSysMenus: function () {
      this.$http.get('/SysMenu/findSysMensTree').then((res) => {
        this.sysMenus = res.data.data
      })
    },
    deleteClick: function (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/SysRole/delete?id=" + id).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.findPage();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    updateClick: function (sysRole) {
      //查询角色下所有 菜单
      this.getSysRoleAndMenu(sysRole.id);
      //查询所有菜单
      this.getFindSysMenus();
      this.sysRole = {
        id: sysRole.id,
        roleName: sysRole.roleName
      }
      this.dialogVisible = true;
    },
    getSysRoleAndMenu: function (id) {
      this.$http.get('/SysRoleMenu/getSysRoleAndMenuByRoleId?roleId=' + id).then((res) => {
        this.sysRole.checkedKeys = res.data.data;
      })
    },
    handleClose: function () {
      this.dialogVisible = false;
    },
    onSubmit: function (sysRole) {
      this.$refs[sysRole].validate((valid) => {
        if (valid) {
          var url = '';
          if (this.sysRole.id === null) {
            url = '/SysRole/insert';
          } else {
            url = '/SysRole/update';
          }

          this.$http.post(url, this.sysRole).then((res) => {
            if (res.data.code === '200') {
              this.dialogVisible = false;
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.findPage();
            }
          })
        } else {
          return false;
        }
      })

    },
    closeDia: function () {
      this.dialogVisible = false;
      this.sysRole = {
        id: null,
        roleName: ''
      }
    },
    onAdd: function () {
      this.sysRole = {
        id: null,
        roleName: '',
        checkedKeys: []
      }
      this.getFindSysMenus();
      this.dialogVisible = true;
    },
    findPage: function () {
      this.$http.get('/SysRole/listByPage?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&roleName=' + this.page.roleName).then((res) => {
        this.pageData = res.data.data
      })
    },
    handleSizeChange(val) {
      console.log(`页: ${val}`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.findPage();
    }
  },
  mounted() {
    this.findPage();
  }
}
</script>

<style lang="less">

</style>
